<template>
    <div class="login-page">
        <!--<headBar>-->
        <!--<div slot="xm-header-center">-->
        <!--<div class="xm-header-title" >登录</div>-->
        <!--</div>-->
        <!--<div slot="xm-header-right"></div>-->
        <!--</headBar>-->

        <div class="xm-form-1">
            <div class="input-group flex border-bottom">
                <label>账号</label>
                <input type="text" v-model="username" class="flex-1" placeholder="请输入登录账号" autocomplete="off">
                <i class="close" v-show="username!=''" @click="username=''"></i>
                <p class="error" v-show="tips.username">{{tips.username}}</p>
            </div>
            <div class="input-group flex border-bottom">
                <label>密码</label>
                <input type="password" v-model="password" class="flex-1" placeholder="请输入登录密码" autocomplete="off"  v-on:blur="showCode">
                <i class="close" v-show="password!=''" @click="password=''"></i>
                <p class="error" v-show="tips.password">{{tips.password}}</p>
            </div>
            <!---->
            <div class="code-group flex" v-if="show_code">
                <div class="input-group border-bottom flex">
                    <label>验证码</label>
                    <input type="text" v-model.trim="code" class="flex-1" placeholder="请输入验证码" autocomplete="off">
                    <i class="close" v-show="code!=''" @click="code=''"></i>
                    <span class="code-img"><img src="../../assets/images/addr_b.jpg" alt=""></span>
                    <p class="error" v-show="tips.code">{{tips.code}}</p>
                </div>
                <span class="code" @click="changeCode" ref="code"></span>
            </div>
            <!--<div class="notice flex"  v-show="tips.notice">-->
                <!--<p class="error">{{tips.notice}}</p>-->
            <!--</div>-->
            <a href="javascript:;" id="loginBtn" class="btn btn1  marginCenter login" @click="login">立即登录</a>
        </div>
        <div class="links">
            <router-link to="/home">返回首页</router-link>
            <router-link to="/register">用户注册</router-link>
            <router-link to="/forgetPwd">忘记密码</router-link>
        </div>
    </div>
</template>

<script>
    import config from '../../config';

    export default {
        props: {},
        data() {
            return {
                username: '',
                password: '',
                code: '',
                show_code: false,//是否显示验证码
                tips: {
                    username: null,
                    password: null,
                    code: null,
                    notice: null,
                }
            }
        },
        methods: {
            login() {
                if (this.loginVerify()) {
                    let param = {username: this.username, password: btoa(this.password), vcode: this.code};
                    login(param).then(data => {
                        if (data.returnCode == '000000') {
                            let status = data.result.auditStatus;
                            this.saveCookie(data.result);
                            if (status == 1) { //待完善资料
                                location.href = '/#/complete';
                                return;
                            } else if (status == 2) {//待审核
                                location.href = '/#/check';
                                return;
                            } else if (status == 4) {//审核未通过
                                location.href = '/#/checkFail';
                                return;
                            } else if (status == 5) {//账号已删除
                                this.showCode();
                                this.tips.username = '账号不存在';
                            } else if (status == 6) {//账号冻结
                                this.showCode();
                                this.tips.username = '账号已冻结，请联系管理员';
                            } else if (status == 3) { //正常状态
                                this.weixinAttorney();
                            }
                        } else {
                            this.showCode();
                            Toast(data.errorMsg);
                        }
                    }).catch(err => {
                        this.showCode();
                    });
                }
            },
            loginVerify() {
                this.tips = {
                    username: null,
                    password: null,
                    code: null,
                    notice: null
                }
                if (this.username == '') {
                    this.tips.username = '登录账号不能为空';
                    return false;
                }
                if (this.password == '') {
                    this.tips.password = '登录密码不能为空';
                    return false;
                }
                if (this.show_code) {//有验证码才去验证
                    if (this.code == '') {
                        this.tips.code = '验证码不能为空';
                        return false;
                    }
                }

                return true;
            },
            changeCode() {
                let _this = this;
                let img = new Image()
                img.src = getVcode();
                img.width = '100px'
                img.onload = function () {
                    _this.$refs.code.innerHTML = '';
                    _this.$refs.code.appendChild(img);
                }
            },
            /**
             * 是否显示验证码
             * */
            showCode() {
                let _this = this;
                showCode(this.username).then(function (data) {
                    _this.show_code = false;
                    if (data.returnCode == '000000') {//返回数据为false表示不显示验证码,为true要显示验证码
                        if(data.result.code){
                            _this.show_code = true;
                            _this.changeCode();
                        }
                    }
                });
            },
            /**
             * 保存cookie
             * @param <Object> 需要保存cookie的对象
             * */
            saveCookie(cookies) {
                for (var key in cookies) {
                    this.setCookie(key, cookies[key]);
                }
            },
            setCookie(name, value) {
                Cookie.set(name, value, {
                    expires: new Date().getTime() + config.expires,
                    path: '/'
                });
            },
            /**
             * 微信授权
             * */
            weixinAttorney() {
                weixinAttorney().then(function (data) {
                    if (data.returnCode == '000000') {
                        location.href = data.result.url;
                    }
                });
            }
        },
        created() {
            let that = this;
            document.title = '登录';
            window.onkeydown = function (e) {
                e.keyCode == 13 && that.login();
            }
           // that.showCode();
        },
        mounted() {

        },
        components: {}
    };
</script>
<style lang="less" scoped>
    @import "login.less";
</style>
